<template>
    <div :class="['container', { 'checked-background': checked }]">
        <div class="left">
            <img src="@/assets/imgs/temp01.jpg" alt="" class="profile-picture">
        </div>
        <div class="center">
            <p class="name">张明华</p>
            <p class="description">ZJ6890-87780</p>
            <p class="info">评标专家</p>
        </div>
        <div class="right">
            <el-checkbox v-model="checked"></el-checkbox>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            checked: false
        };
    }
};
</script>

<style scoped>
.container {
    display: flex;
    align-items: center;
    color: white;
    background-color: #334E6C;
    min-height: 100px;
}

.container.checked-background {
    background-color: #2E5A8B;
    /* 你想要的颜色 */
}

.left {
    flex: 1;
    text-align: center;
}

.profile-picture {
    width: 100px;
    /* 根据需要调整图片大小 */
    height: auto;
}

.center {
    flex: 2;
    padding: 0 20px;
}
.center p{
    margin-bottom: 10px;
}

.right {
    flex: 1;
    text-align: center;
}
</style>